/*
 * @Author: jipeng.Li
 * @Date: 2020-01-14  15:32:52.91
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-03-03 14:40:22
 * @Description: 项目主页
 */
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { iconTime, iconTon } from '../../../../../image';
import {
  fontColorBlack,
  fontColorCoffee,
  fontColorDeepGray,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  splitLineColorLightGray
} from '../../../../../common/styles';
import OrderStatus from '../../../components/order_status';
import TypeAssemble from '../../../components/type-assemble';
import tool from '../../../../../common/utils/getDate';
import FlagView from '../../source/components/FlagView';

const OrderInfoCard = (props) => {
  const {
    isOperate = true,
    rightIconIsShow = true,
    item,
    cancelHandle = () => {
    },
    unitList = []
  } = props;
  // 0.待调度 1.完成调度 2.已取消 3.已过期
  let orderStatus = {
    0: {
      color: fontColorCoffee,
      icon: require('../../../../../image/wl/icon_right_origre.png'),
      text: '待调度'
    },
    1: {
      color: '#2CBD26',
      icon: require('../../../../../image/wl/icon_right_green.png'),
      text: '已完成'
    },
    2: {
      color: fontColorSecDeepGray,
      icon: require('../../../../../image/wl/icon_right_gray.png'),
      text: '已取消'
    },
    3: {
      color: fontColorSecDeepGray,
      icon: require('../../../../../image/wl/icon_right_gray.png'),
      text: '已过期'
    },
  };

  return (
    <View style={styles.itemContainer}>
      {renderTopView()}
      {/* 起止点 */}
      {renderStartAndEndAddressView()}
      {/* 订单价格 */}
      {goodsUnitPriceView()}
      {
        (isOperate && item.status === 0) && (
          <View style={styles.orderOperate}>
            <TouchableOpacity
              style={styles.orderOperateText}
              onPress={() => cancelHandle(item.orderId)}
            >
              <Text style={{
                lineHeight: px2dp(56),
                color: fontColorSecDeepGray,
                textAlign: 'center'
              }}
              >
                取消
              </Text>
            </TouchableOpacity>
          </View>
        )
      }
    </View>
  );

  function renderTopView() {
    const { orderStartTime = '', orderEndTime = '', status = '' } = item;
    return (
      <View style={styles.itemTop}>
        <View style={styles.itemTopTime}>
          <Image style={styles.itemTopTimeImage} source={iconTime} />
          <Text style={{ color: '#9D9A95', fontSize: px2dp(26) }}>
            {`${tool.dateForm(orderStartTime, 'yyyy-MM-dd')} 至 ${tool.dateForm(orderEndTime, 'yyyy-MM-dd')}`}
          </Text>
        </View>
        {
          status !== '' && (
            <OrderStatus
              textColor={orderStatus[status].color}
              rightIcon={rightIconIsShow && orderStatus[status].icon}
              statusText={orderStatus[status].text}
            />
          )
        }
      </View>
    );
  }

  // 起止点页面
  function renderStartAndEndAddressView() {
    const { startAddress = '', endAddress = '', goodsTypeName = '', packagingTypeName = '' } = item;
    return (
      <>
        {/* 起点 */}
        <View style={styles.itemAddress}>
          <FlagView tips='起' colors={['#7EE35E', '#2CBD26']} />
          <Text
            numberOfLines={2}
            ellipsizeMode='tail'
            style={styles.addressName}
          >
            {startAddress}
          </Text>
        </View>
        {/* 货物类型 */}
        <View style={styles.cargoType}>
          <TypeAssemble
            lineData={[goodsTypeName, packagingTypeName]}
          />
        </View>
        {/* 终点 */}
        <View style={styles.itemAddress}>
          <FlagView tips='终' colors={['#F48F25', '#EB2F2F']} />
          <Text
            numberOfLines={2}
            ellipsizeMode='tail'
            style={styles.addressName}
          >
            {endAddress}
          </Text>
        </View>
      </>
    );
  }

  function goodsUnitPriceView() {
    const {
      orderWeight = '',
      orderRemainWeight = '',
      freightAmountPer = '',
      freightUnit = '',
      weightUnit = ''
    } = item;
    return (
      <>
        <View style={styles.orderPrice}>
          <View style={styles.orderUnitPrice}>
            <Image style={styles.orderUnitPriceImage} source={iconTon} />
            <Text>
              <Text>{`${orderRemainWeight}${formatUnit(weightUnit)}`}</Text>
              <Text> / </Text>
              <Text>{`${orderWeight} ${formatUnit(weightUnit)}`}</Text>
            </Text>
          </View>
          <View>
            <Text style={{ color: 'red' }}>
              <Text style={{ fontSize: px2dp(24) }}>￥</Text>
              <Text style={{ fontSize: px2dp(36) }}>{`${freightAmountPer} / ${formatUnit(freightUnit)}`}</Text>
            </Text>
          </View>
        </View>
      </>
    );
  }

  function formatUnit(unit) {
    if (!unit || unitList.length === 0) {
      return '';
    }
    const unitName = unitList.filter(u => u.code === unit);
    if (unitName.length > 0) {
      return unitName[0].name;
    }
    return unit;
  }
};

const styles = StyleSheet.create({
  itemContainer: {
    backgroundColor: mainBgColorWhite,
    justifyContent: 'space-between',
    padding: px2dp(24),
    borderRadius: px2dp(10),
    marginBottom: px2dp(24)
  },
  itemTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingBottom: px2dp(20),
    borderBottomWidth: px2dp(1),
    borderBottomColor: splitLineColorLightGray,
  },
  itemTopTimeImage: {
    width: px2dp(12) * 2,
    height: px2dp(12) * 2,
    marginRight: px2dp(10)
  },
  itemTopTime: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  addressMark: {
    width: px2dp(36),
    height: px2dp(36),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: px2dp(6),
  },
  addressMarkText: {
    color: mainBgColorWhite,
    fontSize: px2dp(24),
    fontWeight: 'bold',
  },
  itemAddress: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: px2dp(20),
  },
  addressName: {
    flex: 1,
    color: fontColorBlack,
    fontSize: px2dp(32),
    fontWeight: 'bold',
    marginLeft: px2dp(10)
  },
  cargoType: {
    paddingTop: px2dp(20),
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(46)
  },
  orderPrice: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: px2dp(24)
  },
  orderUnitPrice: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    padding: px2dp(10),
    borderRadius: px2dp(8)
  },
  orderUnitPriceImage: {
    width: px2dp(32),
    height: px2dp(32),
    marginRight: px2dp(10)
  },
  orderUnitPriceText: {
    color: fontColorDeepGray,
    fontSize: px2dp(20)
  },
  orderOperate: {
    position: 'relative',
    marginTop: px2dp(24),
    borderTopWidth: px2dp(1),
    borderTopColor: splitLineColorLightGray,
    height: px2dp(100)
  },
  orderOperateText: {
    position: 'absolute',
    top: '33%',
    right: 0,
    width: px2dp(142),
    height: px2dp(56),
    borderRadius: px2dp(8),
    borderWidth: px2dp(1),
    borderColor: splitLineColorLightGray,
  }
});

export default OrderInfoCard;
